<template>
  <div>
    <div class="itemView">
      <div class="imgBox">
        <img src="/web-hft-ee/static/img/university/ranking_list_bg.jpg" class="imgView">
      </div>
      <p class="title">{{data.title}}</p>
      <p class="remark">{{data.description}}</p>
      <div class="capitalView">
        <div class="flex_between capitalBox">
          <div class="flex_start">
            <div>{{data.rank}}</div>
            <div style="margin-left: 24px;">{{data.leftAttribute}}</div>
          </div>
          <div>{{data.rightAttribute}}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "topInfoCommon",
    props: {
      data: {},
    }
  }
</script>

<style scoped>
  .imgView {
    width: 100%;
    position: absolute;
    z-index: 1;
    clip-path: polygon(0% 60%, 100% 60%, 100% 0%, 0% 0%);
  }

  .itemView {
    position: relative;
    height: 162px;
  }

  .title {
    top: 28px;
    position: absolute;
    z-index: 2;
    font-family: PingFang-SC-Bold;
    font-size: 24px;
    color: #FFFFFF;
    text-align: left;
    left: 24px;
  }

  .remark {
    top: 65px;
    position: absolute;
    z-index: 2;
    font-family: PingFang-SC-Bold;
    font-size: 16px;
    color: #FFFFFF;
    text-align: left;
    left: 24px;
  }

  .capitalView {
    background: #FFFFFF;
    border-radius: 8px 8px 0 0;
    top: 116px;
    height: 48px;
    position: absolute;
    z-index: 2;
    width: 100%;

  }

  .capitalBox {
    padding-top: 20px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .capitalBox > div {
    font-family: PingFang-SC-Bold;
    font-size: 16px;
    color: #98999E;
  }
  .imgBox{
    height: 120px;
    overflow:hidden;
    position: relative;
  }
</style>
